<template>
    <view class="page">
        <view class="shop-title">{{orderDetails.branch_shop_name?orderDetails.branch_shop_name:""}}</view>
        <view class="order-main">
            <view class="order-list">
                <view class="order-info">
                    <view class="order-time">下单时间：{{orderDetails.order_time?orderDetails.order_time:""}}</view>
                    <view class="ordernum-status">
                        <view class="ordernum">订单编号：{{orderDetails.ordernum?orderDetails.ordernum:""}}</view>
                        <view class="status">已付款</view>
                    </view>
                    <!--如果是堂内订单-->
                    <view class="area-table" v-if="orderDetails.table_code && orderDetails.is_pack=='0'">
                        <view class="area">区域：{{orderDetails.hotel_area_title}}</view>
                        <view class="table-code">桌号：{{orderDetails.table_code}}</view>
                    </view>
                    <view class="pick-code">取餐码：{{orderDetails.pick_code?orderDetails.pick_code:""}}</view>
                    <view class="remarks">是否打包：{{orderDetails.is_pack=='1'?'是':'否'}}</view>
                    <view class="remarks" v-if="orderDetails.is_pack=='1'">配送方式：自提</view>
                    <view class="remarks">备注：{{orderDetails.remarks?orderDetails.remarks:'无'}}</view>
                </view>
                <view class="order-desc">
                    <!--订单明细-->
                    <view class="goods-list-main" v-for="(item,index) in orderDetails.order_desc" :key="index">
                        <view class="goods-list">
                            <view class="image">
                                <image :src="item.image"></image>
                            </view>
                            <view class="goods-info">
                                <view class="title">{{item.title}}</view>
                                <view class="info-text">x{{item.amount}}</view>
                                <view class="info-text">￥{{item.price}}</view>
                                <view class="info-text" v-if="item.pack_price>0">包装费：￥{{item.pack_price}}</view>
                                <view class="is-meal">是否套餐：{{item.is_meal=='1'?'是':'否'}}</view>
                                <view v-if="orderDetails.status=='1' && item.is_meal=='0'" :class="{'refund-btn':true,success:item.refund_state=='1',fail:item.refund_state=='-2',handle:item.refund_state=='-1'}" @click="applyRefund(item.order_item_id,item.refund_state,item.is_meal,item.amount,item.title)">{{item.refund_state=='1'?'退款成功':item.refund_state=='-2'?'退款失败':item.refund_state=='-1'?'处理中':'申请退款'}}</view> 
                            </view>
                        </view>
                        <!--退款失败原因-->
                        <view class="refund-content" v-if="item.refund_state=='-2'">
                            失败原因：{{item.refund_failed}}
                        </view>
                        <!--套餐里菜品的明细-->
                        <view class="meal-items" v-if="item.is_meal=='1'">
                            <block v-for="(item2,index2) in item.omi_data" :key="index2">
                                <view class="item-list">
                                    <view class="item">
                                        <view>- {{item2.title}}</view>
                                        <view>x{{item2.amount}}</view>
                                        <view>￥{{item2.price}}</view>
                                    </view>
                                    <view @click="applyRefund(item2.order_item_id,item2.refund_state,item.is_meal,item2.amount,item2.title)" v-if="orderDetails.status=='1'" :class="{'refund-btn':true,success:item2.refund_state=='1',fail:item2.refund_state=='-2',handle:item2.refund_state=='-1'}">{{item2.refund_state=='1'?'退款成功':item2.refund_state=='-2'?'退款失败':item2.refund_state=='-1'?'处理中':'申请退款'}}</view> 
                                </view>
                                <view class="pack-price" v-if="item2.pack_price>0">包装费：￥{{item2.pack_price}}</view>
                                <view class="refund-content" v-if="item.refund_state=='-2'">
                                    失败原因：{{item.refund_failed}}
                                </view>
                            </block>
                        </view>
                    </view>
                </view>
                <view class="price-status">
                    <view class="price">菜品金额：￥{{orderDetails.total?orderDetails.total:0}}</view>
                    <view class="price active">包装费：￥{{orderDetails.pack_total?orderDetails.pack_total:0}}</view>
                    <view class="price active">实付金额：￥{{orderDetails.true_total?orderDetails.true_total:0}}</view>
                </view>
            </view>
        </view>
        <view class="again-order" @click="replacePage('/pages/goods/index?branch_shop_id='+branch_shop_id+'&table_code='+table_code+'')">再来一单</view>
        <refund-order :show="showRefund" @cancel="cancelRefund()" :orderItemId="orderItemId" :isMeal="isMeal" :amount="amount" :title="title"></refund-order>
    </view>
</template>

<script>
    import {mapActions,mapState} from "vuex";
    import RefundOrder from "../../components/refund_order";
    export default {
        name: "order-details",
        data(){
            return {
                branch_shop_id:"",
                table_code:"",
                showRefund:false, //是否显示退款组件
                orderItemId:"",//菜品订单明细的id
                isMeal:"",//是否为套餐
                amount:1,//菜品的数量
                title:""//菜品名称
            }
        },
        onLoad(opts){
            this.branch_shop_id=opts.branch_shop_id?opts.branch_shop_id:"";
            this.table_code=opts.table_code?opts.table_code:"";
            this.ordernum=opts.ordernum?opts.ordernum:"";//订单编号
            this.$utils.safeUser(this,this.branch_shop_id,this.table_code,()=>{
                this.getOrderDetails({ordernum:this.ordernum});
            })
        },
        methods:{
            ...mapActions({
                getOrderDetails:"order/getOrderDetails" //获取订单详情
            }),
            replacePage(url){
                uni.redirectTo({ url })
            },
            //申请退款
            applyRefund(orderItemId,refundState,isMeal,amount,title){
                //退款状态不能是退款成功、处理中、退款失败
                if(refundState!='1' && refundState!='-1' && refundState!="-2"){
                    this.showRefund=true;//显示退款组件
                    this.orderItemId=orderItemId;//菜品订单明细的id
                    this.isMeal=isMeal;//是否为套餐
                    this.amount=parseInt(amount);//菜品的数量
                    this.title=title;//菜品的名称
                }
            },
            //隐藏申请退款组件
            cancelRefund(){
                this.amount=1;
                this.showRefund=false;
            }
        },
        computed:{
            ...mapState({
                orderDetails:state=>state.order.orderDetails//订单详情
            })
        },
        //下拉刷新
		onPullDownRefresh() {
            this.getOrderDetails({ordernum:this.ordernum,complete:()=>{
                uni.stopPullDownRefresh();
            }});
		},
        components:{
            RefundOrder
        }
    }
</script>

<style scoped>
    .page{width:100%;min-height:100vh;background-color:#FFFFFF;overflow:hidden;}
    .shop-title{width:100%;height:80rpx;background-color:#FFFFFF;border-bottom: 1px solid #EFEFEF;font-size:28rpx;text-align:center;line-height:80rpx;}
    .order-main{width:100%;}
    .order-main .order-list{width:100%;border-bottom:1px solid #f17f1f;}
    .order-main .order-list .order-info{width:100%;border-bottom: 1px solid #EFEFEF;box-sizing: border-box;padding:20rpx;}
    .order-main .order-list .ordernum-status{width:100%;display:flex;font-size:28rpx;justify-content: space-between;margin-top:20rpx;}
    .order-main .order-list .area-table{width:100%;display:flex;font-size:28rpx;margin-top:20rpx;}
    .order-main .order-list .area-table .area{margin-right:40rpx;}
    .order-main .order-list .order-time{font-size:28rpx;}
    .order-main .order-list .pick-code{font-size:28rpx;color:#E30019;margin-top:20rpx;}
    .order-main .order-list .remarks{font-size:28rpx;margin-top:20rpx;}

    .order-main .order-desc{width:100%;}
    .order-main .goods-list-main{width:100%;box-sizing: border-box;padding:20rpx;border-bottom: 1px solid #EFEFEF;}
    .order-main .order-desc .goods-list{width:100%;display:flex;justify-content: space-between;align-items: center;margin-bottom:20rpx;}
    .order-main .order-desc .goods-list .image{width:120rpx;height:120rpx;}
    .order-main .order-desc .goods-list .image image{width:100%;height:100%;border-radius: 5px;}
    .order-main .order-desc .goods-list .goods-info{width:80%;height:auto;font-size:28rpx;overflow:hidden;position: relative;}
    .order-main .order-desc .goods-list .goods-info .title{width:100%;height:45rpx;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
    .order-main .order-desc .goods-list .goods-info .info-text{width:auto;height:auto;color:#909090;margin-bottom:10rpx;}
    .order-main .order-desc .goods-list .goods-info .is-meal{width:auto;height:auto;color:#909090;}
    .order-main .order-desc .goods-list .goods-info .refund-btn{width:auto;height:auto;position: absolute;right:0rpx;bottom:0rpx;padding:8rpx 15rpx;color:#FFFFFF;font-size:28rpx;background-color:#f17f1f;border-radius: 4px;}
    .order-main .order-desc .goods-list .goods-info .refund-btn.success{background-color:#007aff;}
    .order-main .order-desc .goods-list .goods-info .refund-btn.fail{background-color:#E30019;}
    .order-main .order-desc .goods-list .goods-info .refund-btn.handle{background-color:#CCCCCC;}
    .order-main .order-desc .meal-items{width:100%;margin-top:20rpx;}
    .order-main .order-desc .meal-items .item-list{width:100%;height:80rpx;display:flex;justify-content: space-between;align-items: center;font-size:28rpx;color:#909090}
    .order-main .order-desc .meal-items .item-list .item{display:flex;}
    .order-main .order-desc .meal-items .item-list .item view{margin-right:20rpx;}
    .order-main .order-desc .meal-items .item-list .refund-btn{width:auto;height:auto;padding:8rpx 15rpx;color:#FFFFFF;font-size:28rpx;background-color:#f17f1f;border-radius: 4px;}
    .order-main .order-desc .meal-items .item-list .refund-btn.success{background-color:#007aff;}
    .order-main .order-desc .meal-items .item-list .refund-btn.fail{background-color:#E30019;}
    .order-main .order-desc .meal-items .item-list .refund-btn.handle{background-color:#CCCCCC}
    .order-main .order-desc .goods-list-main .refund-content{width:100%;font-size:28rpx;color:#E30019;}
    .order-main .order-list .price-status{width:100%;height:auto;box-sizing: border-box;padding:20rpx;}
    .order-main .order-list .price-status .price{font-size:28rpx;color:#333333;margin-bottom:10rpx;}
    .order-main .order-list .price-status .price.active{color:#E30019;}

    .again-order{width:200rpx;height:60rpx;font-size:28rpx;color:#FFFFFF;background-color:#E30019;margin:0 auto;text-align:center;line-height:60rpx;border-radius: 4px;margin-top:30rpx;margin-bottom:30rpx;}

    .order-main .pack-price{font-size:28rpx;color:#909090;margin-left:24rpx;}
</style>
